<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>入库信息</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <%--表格组件--%>
    <el-form :inline="true" :model="searchForm">
        <el-form-item label="分店信息">
            <el-select v-model="searchForm.branchid" placeholder="请选择要查询的分店">
                <el-option v-for="item in branchInfoList" :key="item.branchid" :label="item.branchname"
                           :value="item.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="initInLibrayInfo(1)" icon="el-icon-search">查询</el-button>
        </el-form-item>
    </el-form>
    <%--按钮组件--%>
    <div>
        <el-button @click="addInLibray" type="primary" icon="el-icon-circle-plus-outline">新增入库</el-button>
        <el-button type="primary" @click="initGoodsData" icon="el-icon-folder-add">添加商品</el-button>
        <el-button @click="refresh" type="primary" icon="el-icon-refresh">刷新</el-button>
    </div>
    <el-divider></el-divider>
    <div v-if="inLibrayList.length>0">
        <el-table
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                ref="multipleTable"
                :data="inLibrayList"
                border
                @selection-change="handleSelectionChange"
                style="width: 100%">

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    width="90px"
                    show-overflow-tooltip
                    label="入库编号">
            </el-table-column>
            <el-table-column
                    prop="date"
                    width="200px"
                    show-overflow-tooltip
                    label="入库时间">
            </el-table-column>
            <el-table-column
                    width="120px"
                    label="审核状态">
                <template slot-scope="scope">
                    <el-tag effect="dark" :type="scope.row.status==1?'warning':scope.row.status==2?'success':'danger'">
                        {{scope.row.status==1?'审核中':scope.row.status==2?'审核通过':'审核不通过'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="staff.staffname"
                    width="80px"
                    show-overflow-tooltip
                    label="操作员">
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    width="200px"
                    show-overflow-tooltip
                    label="店名">
            </el-table-column>
            <el-table-column
                    prop="dates"
                    width="200px"
                    show-overflow-tooltip
                    label="审核时间">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    show-overflow-tooltip
                    label="驳回理由">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button type="info" size="medium" @click="details(scope.row.id)">详细信息</el-button>
                </template>
            </el-table-column>
        </el-table>
        <%--分页组件--%>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <el-empty v-else description="暂无数据,请添加入库数据"></el-empty>

    <%--详细信息弹出层--%>
    <el-dialog
            title="信息"
            :visible.sync="dialogVisibleInfo"
            width="90%">
        <el-table
                :data="storageInfoList"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    show-overflow-tooltip
                    label="入库编号">
            </el-table-column>
            <el-table-column
                    prop="goodsid"
                    show-overflow-tooltip
                    label="商品id">
            </el-table-column>
            <el-table-column
                    prop="goods.goodsname"
                    show-overflow-tooltip
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="num"
                    show-overflow-tooltip
                    label="入库数量">
            </el-table-column>
            <el-table-column
                    prop="goods.cprice"
                    show-overflow-tooltip
                    label="进价">
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    show-overflow-tooltip
                    label="所属分店">
            </el-table-column>
            <el-table-column
                    label="总价">
                <template slot-scope="scope">
                    <span>{{ scope.row.goods.cprice * scope.row.num }}</span>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
    <%--新增入库弹出层--%>
    <el-dialog
            title="新增入库"
            :visible.sync="addInLibrayVisible"
            width="100%">
        <el-button type="success" @click="addInLibrayAllEntry" icon="el-icon-folder-add">新增入库</el-button>
        <el-table
                ref="addInLibrayMultipleTable"
                border
                @selection-change="addInLibrayHandleSelectionChange"
                :data="addInLibrayData"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="goods.goodsname"
                    show-overflow-tooltip
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="goods.layout"
                    show-overflow-tooltip
                    label="类型名称">
            </el-table-column>
            <el-table-column
                    prop="goods.shafttype"
                    show-overflow-tooltip
                    label="键轴名称">
            </el-table-column>
            <el-table-column
                    prop="goods.interfacetype"
                    show-overflow-tooltip
                    label="接口名称">
            </el-table-column>
            <el-table-column
                    prop="goods.cprice"
                    show-overflow-tooltip
                    label="进价">
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    show-overflow-tooltip
                    label="店名">
            </el-table-column>
            <el-table-column
                    prop="counts"
                    show-overflow-tooltip
                    label="库存">
            </el-table-column>
            <el-table-column label="入库量">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.incounts" placeholder="请输入入库量"></el-input>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="addInLibrayHandleSizeChange"
                @current-change="addInLibrayHandleCurrentChange"
                :current-page="addInLibrayPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="addInLibrayPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="addInLibrayTotal">
        </el-pagination>
        <span slot="footer" class="dialog-footer"></span>
    </el-dialog>

    <%--添加商品弹出层--%>
    <el-dialog
            title="添加商品"
            :visible.sync="goodsVisible"
            width="100%">
        <el-button @click="goodsAdd" type="primary" icon="el-icon-add">添加</el-button>
        <el-table
                @selection-change="goodsSelectionChange"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :data="goodsData"
                border
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    fixed
                    label="商品图片"
                    width="200px"
                    height="60px">
                <template slot-scope="scope">
                    <el-image
                            style="width: 200px;height: 60px;"
                            :src="scope.row.goods.url"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="goods.goodsname"
                    label="商品名称"
                    show-overflow-tooltip
                    width="150px"
            >
            </el-table-column>
            <el-table-column
                    prop="goods.layout"
                    label="键盘布局"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>
            <el-table-column
                    prop="keycapname"
                    label="键帽材质"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>
            <el-table-column
                    prop="keyboardcolorname"
                    label="键盘颜色"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>
            <el-table-column
                    prop="goods.shafttype"
                    label="轴体类型"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>
            <el-table-column
                    prop="shaftchoose"
                    label="轴体选择"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>
            <el-table-column
                    prop="goods.interfacetype"
                    label="接口类型"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>
            <el-table-column
                    prop="backlightcolorname"
                    label="背光颜色"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>
            <el-table-column
                    prop="goods.cprice"
                    label="商品进价"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>
            <el-table-column
                    prop="goods.sprice"
                    label="商品售价"
                    show-overflow-tooltip
                    width="120px"
            >
            </el-table-column>

        </el-table>
        <el-pagination
                @size-change="goodsSizeChange"
                @current-change="goodsCurrentChange"
                :current-page="goodsPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="goodsPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="goodsTotal">
        </el-pagination>
        <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            page: 1,//当前页数
            pageSize: 5,//每页展示的数量
            inLibrayList: [],//入口信息
            total: 0,//总条数
            multipleTable: [],//左侧多选框中的数据
            dialogVisibleInfo: false,//详细信息弹出层
            storageInfoList: [],//详细信息数据
            searchForm: {
                /*分店id*/
                branchid: undefined
            },//下拉选择框
            branchInfoList: [],//下列选择框数据

            /*新增入库数据*/
            addInLibrayVisible: false,//新增入库弹出层
            addInLibrayData: [],//新增入库信息数据
            addInLibrayPage: 1,//新增入库信息的当前页数
            addInLibrayPageSize: 5,//新增入库信息的最大页数
            addInLibrayTotal: 0, //新增入库信息的总数
            addInLibrayMultipleTable: [],//新增入库信息左侧多选框选择的数据
            /*新增入库信息的数量表单*/
            addInLibrayForm: {},
            addInLibrayCheckData: [],//新增入库信息选择框的数据\

            /*添加商品数据*/
            goodsData: [],//添加商品的数据
            goodsPage: 1,//添加商品的页数
            goodsPageSize: 5,//添加商品每页展示最大量
            goodsTotal: 0,//添加商品条目
            goodsVisible: false,//添加商品弹出层
            goodsCheckedData: [],//添加商品多选框数据

        },
        created() {
            this.initBranchInfo();
            this.initInLibrayInfo();
        },
        methods: {
            /*获取入库信息*/
            initInLibrayInfo(val) {
                if (val === 1) {
                    this.page = 1;
                }
                let self = this;
                axios.get('/inlibray/allInfo', {
                    params: {
                        page: this.page,
                        pageSize: this.pageSize,
                        branchid: this.searchForm.branchid
                    }
                }).then(res => {
                    self.inLibrayList = res.data.data.rows;
                    self.total = res.data.data.total;
                })
            },
            /*获取下拉框数据*/
            initBranchInfo() {
                let self = this;
                axios.get('/branch/list').then(res => {
                    self.branchInfoList = res.data.data;
                })
            },
            /*左侧多选按钮点击事件*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            /*获取详细信息*/
            details(id) {
                this.dialogVisibleInfo = true;
                axios.get('/storageVolume/list', {
                    params: {
                        id: id
                    }
                }).then(res => {
                    this.storageInfoList = res.data.data[0].list;
                })
            },
            /*切换每页最大展示数量*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.initInLibrayInfo();
            },
            /*切换页面*/
            handleCurrentChange(val) {
                this.page = val;
                this.initInLibrayInfo();
            },
            /*进行下拉搜索*/
            onSearch() {
            },
            /*新增入库按钮*/
            addInLibray() {
                let self = this;
                this.addInLibrayVisible = true;
                axios.get('/branchGoods/getAllShoping', {
                    params: {
                        page: this.addInLibrayPage,
                        pageSize: this.addInLibrayPageSize
                    }
                }).then(res => {
                    this.addInLibrayData = res.data.data.rows;
                    this.addInLibrayTotal = res.data.data.total;
                })
            },
            /*修改新增入库信息的最大数量*/
            addInLibrayHandleSizeChange(val) {
                this.addInLibrayPageSize = val;
                this.addInLibray();
            },
            /*修改新增入库信息的最大数量*/
            addInLibrayHandleCurrentChange(val) {
                this.addInLibrayPage = val;
                this.addInLibray();
            },
            /*新增入库信息左侧多选框*/
            addInLibrayHandleSelectionChange(val) {
                this.addInLibrayCheckData = val;
            },
            /*新增入库信息的提交按钮*/
            addInLibrayAllEntry() {
                let self = this;
                if (this.addInLibrayCheckData.length > 0) {
                    /*对输入的内容进行校验*/
                    for (const item of this.addInLibrayCheckData) {
                        if (item.incounts === '' || item.incounts === null || item.incounts.includes('-')) {
                            self.$message({
                                message: '请检查您的数据',
                                center: true,
                                type: 'warning'
                            });
                            return;
                        }
                    }
                    axios.post('/inlibray/addInlibray', this.addInLibrayCheckData).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: '成功添加入库',
                                type: 'success'
                            });
                            this.refresh();
                        } else {
                            this.$message.error('添加失败，请联系管理员解决问题');
                        }
                        //关闭弹出层
                        this.addInLibrayVisible = false;
                    })
                } else {
                    self.$message({
                        message: '请选择一项入库商品信息',
                        center: true,
                        type: 'warning'
                    });
                }
            },
            /*进行页面刷新*/
            refresh() {
                this.page = 1;
                this.pageSize = 5;
                this.addInLibrayPage = 1;
                this.addInLibrayPageSize = 5;
                this.initInLibrayInfo();
            },
            /*进行添加商品*/
            initGoodsData() {
                this.goodsVisible = true;
                this.initGoods();
            },
            /*添加商品信息初始化*/
            initGoods() {
                axios.get('/goods/goodsList', {
                    params: {
                        page: this.goodsPage,
                        pageSize: this.goodsPageSize
                    }
                }).then(res => {
                    this.goodsData = res.data.data.rows;
                    this.goodsTotal = res.data.data.total;
                })
            },
            /*添加商品的修改最大页码*/
            goodsSizeChange(val) {
                this.goodsPageSize = val;
                this.initGoods();
            },
            /*添加商品的修改当前页数*/
            goodsCurrentChange(val) {
                this.goodsPage = val;
                this.initGoods();
            },
            /*添加商品多选框事件*/
            goodsSelectionChange(val) {
                this.goodsCheckedData = val;
            },
            /*进行最终添加商品*/
            goodsAdd() {
                if (this.goodsCheckedData.length > 0) {
                    axios.post('/branchGoods/addBranchGoods', this.goodsCheckedData).then(res => {
                        //判断该分店有误该商品
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        } else if (res.data.code === 202) {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                        //进行页面刷新
                        this.refresh();
                        this.goodsVisible = false;
                    })
                } else {
                    this.$message({
                        message: '请选择一条商品进行添加！',
                        type: 'warning'
                    });
                }
            }
        }
    })
</script>
</body>
</html>
